<template>
  <div  ref="functionBox" class="table-box">
    <!-- 功能区 -->
    <div v-if="!tableConfig.hideFuncBar" class="function-box"  :class="{'btn-align-right': tableConfig.hideSearchBar && btnAlign==='right'}">
      <template v-if="tableConfig.onlySettingBtn">
        <div v-if="showCustomSetting" class="btn-box">
          <slot name="setting-before">
            
          </slot>
          <el-button  size="mini"  @click="getMore('setting')">
            <svg-icon icon-class="shezhi-line" /> 表格设置
          </el-button>
        </div>
      </template>
      <template v-else>
        <table-search
          v-if="!tableConfig.hideSearchBar"
          :filter-list="columnDatas"
          :show-custom-collect="showCustomCollect && (tableConfig.onlySearchBar?false:true) "
          :search-default.sync="sortSearch"
          :default-search="defaultSearch"
          :has-default-search="hasDefaultSearch"
          :tab-index="tableConfig.tabIndex"
          @tableSearch="initTableData"
          @get-search="getSearchData"
          @collectFilter="getCombineFilter"
          @showCombineFilter="showCombineFilter"
          @change="searchFieldChangeHandle"
        />
        <div class="btn-box">
          <template v-if="(tableConfig.onlySearchBar && !tableConfig.hideSearchBar) || (!tableConfig.hideSearchBar && outerBtns.length===0 && innerBtns.length==0)">
            <slot name="combine-before">
              
            </slot>
            <el-button  v-if="showCustomCombine" size="mini" type="primary" @click="getMore('combine')">
              <svg-icon icon-class="sousuo-line" /> 组合查询
            </el-button>
          </template>
          <template  v-else>
            <slot name="outerbtn-before">
              
            </slot>
            <el-button
              v-for="(btnItem,index) in outerBtns"
              :key="index"
              type="primary"
              size="mini"
              @click="getMore(btnItem.optCode)"
            >
              <svg-icon v-if="btnItem.icon&&btnItem.icon!==''" :icon-class="btnItem.icon"/> {{ btnItem.buttonName }}
            </el-button>
          
            <el-dropdown v-if="showDropdown" trigger="click"  size="small" @command="getMore">
              <el-button type="primary" size="mini">更多<i class="el-icon-arrow-down" /></el-button>
              <el-dropdown-menu slot="dropdown" class="more-dropdown">
                <el-dropdown-item command="combine" v-if="!tableConfig.hideSearchBar && showCustomCombine">
                  <svg-icon icon-class="sousuo-line" /> 组合查询
                </el-dropdown-item>
                <el-dropdown-item command="setting" v-if="showCustomSetting && tableConfig.setting && tableConfig.setting.length>0">
                  <svg-icon icon-class="shezhi-line" /> 表格设置
                </el-dropdown-item>
                <el-dropdown-item
                  v-for="(item,index) in innerBtns"
                  :key="index"
                  :command="item.optCode"
                >
                  <svg-icon
                    v-if="item.icon&&item.icon!==''"
                    :icon-class="item.icon"
                  /> {{ item.buttonName }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </div>
        <div class="btn-box last-flex"  
          v-if="(tableConfig.onlySearchBar || tableConfig.hideSearchBar || (!tableConfig.hideSearchBar  && outerBtns.length===0 && innerBtns.length===0)) && 
           showCustomSetting && 
           (tableConfig.setting && tableConfig.setting.length>0) &&
           (!showDropdown ||  (outerBtns.length===0 && innerBtns.length===0))">
          <slot name="setting-before">
            
          </slot>
          <el-button
            size="mini"
            @click="getMore('setting')">
            <svg-icon icon-class="shezhi-line" /> 表格设置
          </el-button>
        </div>
        <div v-if="!tableConfig.onlySearchBar && conditonTags.length>0" class="condition-box">
          <el-tag
            v-for="(item,index) in conditonTags"
            :key="index"
            size="small"
            effect="plain"
            class="condition-tag"
            type="info"
            closable
            @close="delCondition(index)"
            @click="openCombinefilter"
          >
            {{ item.name }}&nbsp;&nbsp;{{ item.conditon }}&nbsp;&nbsp;“{{ item.value }}”
            </el-tag>            
          <el-button style="padding:0;border:0" @click="clearFilterItems">清空</el-button>
        </div>
      </template>
    </div>
    <slot name="table-before"></slot>
    <!-- 表格区 -->
    <div class="table-list-box" :class="{'table-mini-list':tableSize=='mini'}">
      <div
        v-if="!isDataLoad"
        ref="tableBoxNoData"
        class="table-no-data"
        :style="{height: noTableDataHeight + 'px'}"
      >暂无数据</div>
      
      <!-- v-on="$listeners" -->
      <ux-grid
        v-if="isDataLoad"
        ref="plxTable"
        v-loading="tableDataLoading"
        v-bind="$attrs"
        :border="$attrs.border===true?true:false"
        :size="tableSize"
        :data="tableData"
        style="width: 100%;"
        :height="tableNewHeight"
        :max-height="tableMaxHeight"
        header-cell-class-name="header-cell-class"
        :header-cell-style="{'background':'#F6F6F6','height':'30px','font-weight':'600','padding':'0','font-size':'12px','color':'#333'}"
        :row-style="rowClass"
        :row-class-name="tableRowClassName"
        :cell-class-name="tableCellClassName"        
        :row-key="!!tableRowKey"
        :span-method="tableSpanMethod"

        widthResize
        column-key
        show-header-overflow="ellipsis"
        
        :sort-config="{
          'default-sort':{prop: sortField, order: sortMethod}
        }"
        :checkbox-config="{
          checkField:tableCheckboxConfig ? tableCheckboxConfig.checkField || '' :'',
          checkStrictly:tableCheckboxConfig ? tableCheckboxConfig.checkStrictly || false : false,
          checkMethod:tableCheckboxConfig ? tableCheckboxConfig.checkMethod || null : null,
          highlight: true,
          trigger:clickRowSelection===false?'default':'row'
        }"
        :keep-source="(tableEditConfig &&  tableEditConfig.canEdit!==false)?true:false"
        :edit-config="(tableEditConfig &&  tableEditConfig.canEdit!==false)?{
          trigger:  (tableEditConfig && tableEditConfig.trigger) ||'click', 
          mode: (tableEditConfig && tableEditConfig.mode) || 'cell',
          activeMethod: (tableEditConfig && tableEditConfig.activeMethod) || null
        }:null"
        :valid-config="!!tableEditConfig ? {autoPos:true} : null"
        :rules="(tableEditConfig && tableEditConfig.rules) || {}"

        @cell-click="tableCellClick"
        @row-click="tableRowHandle"
        @row-dblclick="tableRowDblclick"
        @selection-change="handleSelectionChange"
        @select="handleSelect"
        @select-all="handleSelectAll"
        @sort-change="sortChange"
        @expand-change="expandChange"
        @header-dragend="changeColWidth"
        @table-body-scroll="tableScroll"
      >
        <ux-table-column v-if="showSelection" fixed="left" type="checkbox" width="40" />
        <ux-table-column v-if="showIndex" fixed="left" title="序号" type="index" width="50" />
        <slot name="before" />
        <!---->
        <template v-for="(item,index) in tableConfig.setting">
          <ux-table-column
            v-if="!item.hidden"
            :key="`${columnKey}-${index}`"
            :class-name="`column${index}`"
            :sortable="(tableSortable === false ||item.sortable===false)?false:true"
            :resizable="true"
            :visible="!item.hidden"
            :field="item.prop"
            :title="item.label"
            :fixed="item.fixed?item.fixed=='right'?'right':'left':''"
            :min-width="item.minWidth"
            :width="item.width"
            :align="item.align"
            :edit="item.edit"
            :type="item.columnType"
            :currency="item.currency"
            :thousands="item.thousands"
            :sort="item.sort"

            :show-overflow="item.overflowHidden === false ? false : 'tooltip'"
            :show-header-overflow="true"
            :edit-render="(item.edit && item.edit.canEdit!==false)?{'autofocus':'.el-input__inner'}:false" 
          >

            <template slot="header">
              <i v-if="item.required" class="required-icon"></i>
              <i v-if="item.edit" class="elx-cell--edit-icon el-icon-edit-outline"></i>
              <!-- <svg-icon v-if="item.edit" class-name="edit-style" icon-class="bianjitianxie-solid" /> -->
              {{ item.label }}
            </template>
            <template v-slot:edit="{ row ,column}">
              <div v-if="item.edit && item.edit.editCondition && !getRowFormatters(row,item.edit.editCondition)"
               style="overflow: hidden; white-space:normal">
               <!--禁止编辑时展示-->
               <div v-if="item.isImage">
                  <img :src="row[item.prop]" class="table-image" />
                </div>
                <div v-else-if="item.isIcon">
                  <span><svg-icon class-name="table-icon" :icon-class="row[item.prop]" /></span>
                </div>
                <my-render v-else-if="item.render" :row="row"  :render="item.render" />
                <template v-else>
                  <div v-if="item.button" class="table-button-box">
                    <el-button v-for="(b, key) in item.button" :key="key" @click="b.clickFun(row)" :type="b.type||'text'" :class="b.className" size="small">{{b.name}}</el-button>
                  </div>
                  <span v-if="item.iconClass"><svg-icon class-name="table-icon" :icon-class="item.iconClass" /></span>
                  <template v-if="!item.formatData">
                    <span v-if="item.isButton" :class="item.className" @click.stop="item.clickFun(row)">
                      <template v-if="item.currency || item.thousands">
                        {{  row[item.prop] | formatAmount(item.thousands) }}
                      </template>
                      <template v-else>
                        {{ row[item.prop] }}
                      </template>
                    </span>
                    <span v-else :class="item.className">
                      <template v-if="item.currency || item.thousands">
                        {{  row[item.prop] | formatAmount(item.thousands) }}
                      </template>
                      <template v-else>
                        {{ row[item.prop] | statusFormat(item.propEnum) }}
                      </template>
                    </span>
                  </template>
                  <template v-else>
                    <span  v-if="item.isButton" :class="item.className" @click.stop="item.clickFun(row)">{{ row | formatters(item.formatData) }}</span>
                    <span v-else :class="item.className">{{ row | formatters(item.formatData) }}</span>
                  </template>
                </template>
              </div>
              <div v-else @click.stop="">
                <!--可编辑时展示-->
                <template v-if="item.edit.editType==='select'">
                  <el-select v-if="item.edit.remote" class="edit-cell" size="mini" v-model="row[item.prop]" :disabled="getRowDisabled(row,item.edit.disabled)" :filterable="item.edit.filterable" :remote="item.edit.remote" default-first-option :loading="remoteLoading" :remote-method="remoteSelections" placeholder="请选择" @focus="handleEditFocus(item.edit,row)" @change="handleEditChange(row,column,item.prop)">
                    <el-option v-for="(item,index) in item.edit.selectData" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-select v-else class="edit-cell" size="mini" v-model="row[item.prop]" :disabled="getRowDisabled(row,item.edit.disabled)" :filterable="item.edit.filterable" default-first-option :loading="remoteLoading" placeholder="请选择" @focus="handleEditFocus(item.edit,row)" @change="handleEditChange(row,column,item.prop)">
                    <el-option 
                        v-for="(item,index) in getRowOptions(row,item.edit.optionFnc || item.edit.selectData)" 
                        :key="index" 
                        :label="item.label" 
                        :value="item.value" 
                      />
                  </el-select>
                </template>
                <template v-else-if="item.edit.editType==='checkbox'">
                  <el-checkbox-group v-model="row[item.prop]"  :disabled="getRowDisabled(row,item.edit.disabled)"  @change="handleEditChange(row,column,item.prop)">
                    <el-checkbox 
                      v-for="(ckb,index) in getRowOptions(row,item.edit.optionFnc || item.edit.selectData)" 
                      :key="index"
                      :label="ckb.value"
                    >
                      {{ckb.label}}
                    </el-checkbox>
                  </el-checkbox-group>
                </template>
                <template v-else-if="item.edit.editType==='radio'">
                  <el-radio-group v-model="row[item.prop]" :disabled="getRowDisabled(row,item.edit.disabled)" @change="handleEditChange(row,column,item.prop)">
                    <el-radio 
                      v-for="(opt,index) in getRowOptions(row,item.edit.optionFnc || item.edit.selectData)" 
                      :key="index"
                      :label="opt.value"
                    >
                      {{opt.label}}
                    </el-radio>
                  </el-radio-group>
                </template>
                <template v-else-if="item.edit.editType==='date'">
                  <el-date-picker class="edit-cell" size="mini" v-model="row[item.prop]" :disabled="getRowDisabled(row,item.edit.disabled)" :picker-options="item.edit.disableTime ? timeDisableOptions : null" placeholder="请选择日期" :value-format="item.edit.valueFormat ? item.edit.valueFormat : 'yyyy-MM-dd'" @change="handleEditChange(row,column,item.prop)"></el-date-picker>
                </template>
                <template v-else-if="item.edit.editType==='number'">
                  <div @click.stop="">
                    <el-input-number
                      class="edit-cell"
                      v-model="row[item.prop]"
                      size="mini" 
                      :disabled="getRowDisabled(row,item.edit.disabled)"
                      :min="item.edit.minFnc || item.edit.minNumber?getRowFormatters(row,item.edit.minFnc || item.edit.minNumber) : 0" 
                      :max="item.edit.maxFnc || item.edit.maxNumber?getRowFormatters(row,item.edit.maxFnc || item.edit.maxNumber) : 999"
                      @change="handleEditChange(row,column,item.prop)" 
                      @input="handleEditInInputput(row,column,item.prop)"
                    />
                  </div>
                </template>
                <template v-else-if="item.edit.editType==='picklist'">
                  <el-input class="edit-cell" size="mini" v-model.trim="row[item.prop]" :disabled="getRowDisabled(row,item.edit.disabled)" placeholder="请输入内容" @change="handleEditChange(row,column,item.prop)" @input="handleEditInInputput(row,column,item.prop)">
                    <svg-icon slot="suffix" class-name="picklist-icon" icon-class="sousuo-solid" @click.native.stop="pickListClick(row,column)"></svg-icon>
                  </el-input>
                </template>
                <template v-else>
                  <el-select v-if="item.edit.remote" class="textRemote edit-cell" size="mini" v-model="row[item.prop]" :disabled="getRowDisabled(row,item.edit.disabled)" :filterable="item.edit.filterable" :remote="item.edit.remote" default-first-option :loading="remoteLoading" :remote-method="(query)=>remoteSelections(query, item.edit)" placeholder="请输入内容" @focus="handleEditFocus(item.edit,$event)" @change="handleEditChange(row,column,item.prop)">
                    <el-option v-for="(item,index) in item.edit.selectData" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-input v-else class="edit-cell" size="mini" v-model.trim="row[item.prop]" :disabled="getRowDisabled(row,item.edit.disabled)" :maxlength="item.edit.maxlength || 50" placeholder="请输入内容" @change="handleEditChange(row,column,item.prop)" @input="handleEditInInputput(row,column,item.prop)"></el-input>
                </template>
              </div>
            </template>
            <template v-slot="{ row ,column}">
              <div v-if="item.isImage">
                <img :src="row[item.prop]" class="table-image" />
              </div>
              <div v-else-if="item.isIcon">
                <span><svg-icon class-name="table-icon" :icon-class="row[item.prop]" /></span>
              </div>
              <my-render v-else-if="item.render" :row="row"  :render="item.render" />
              <template v-else>
                <div v-if="item.button" class="table-button-box">
                  <el-button v-for="(b, key) in item.button" :key="key" @click="b.clickFun(row)" :type="b.type||'text'" :class="b.className" size="small">{{b.name}}</el-button>
                </div>
                <span v-if="item.iconClass"><svg-icon class-name="table-icon" :icon-class="item.iconClass" /></span>
                <template v-if="!item.formatData">
                  <span v-if="item.isButton" :class="item.className" @click.stop="item.clickFun(row)">
                    <template v-if="item.currency || item.thousands">
                      {{  row[item.prop] | formatAmount(item.thousands) }}
                    </template>
                    <template v-else>
                      {{ row[item.prop] }}
                    </template>
                  </span>
                  <span v-else :class="item.className">
                    <template v-if="item.currency || item.thousands">
                      {{  row[item.prop] | formatAmount(item.thousands) }}
                    </template>
                    <template v-else>
                      {{ row[item.prop] | statusFormat(item.propEnum) }}
                    </template>
                  </span>
                </template>
                <template v-else>
                  <span  v-if="item.isButton" :class="item.className" @click.stop="item.clickFun(row)">{{ row | formatters(item.formatData) }}</span>
                  <span v-else :class="item.className">{{ row | formatters(item.formatData) }}</span>
                </template>
              </template>
            </template>
          </ux-table-column>
        </template>
        <slot />
      </ux-grid>
    </div>
    <div ref="functionFooter">
      <slot name="table-after"></slot>
    </div>
    <!-- 分页 -->
    <template v-if="showPage">
      <pagination
        v-if="newpages == false"
        ref="pageRef"
        :total="tableRequest.tableTotal"
        :page.sync="tableRequest.page"
        :limit.sync="tableRequest.rows"
        :params="tableRequest"
        class="tests"
        @pagination="initTableData"
        :pageSizes.sync='tableRequest.tablePage'
        v-show="tableRequest.tableTotal>0"
        :auto-scroll="autoScroll"
      />
      <paginations
        v-if="newpages == true"
        ref="pageRef"
        class="test"
        :total="tableRequest.tableTotal"
        :page.sync="tableRequest.page"
        :limit.sync="tableRequest.rows"
        :params="tableRequest"
        @pagination="initTableData"
        :pageSizes.sync='tableRequest.tablePage'
        v-show="tableRequest.tableTotal>0"
        :auto-scroll="autoScroll"
      />
    </template>
    <!-- 分页 -->

    <!-- 组合查询弹出层 -->
    <combine-filter
      ref="combFilter"
      :options="columnDatas"
      :show.sync="showCombFilter"
      :interface-path="tableConfig.interfacePath"
      :tab-index="tableConfig.tabIndex"
      v-model="hasSearchConditions"
      @change="getCombineFilter"
    />
    <!-- 组合查询弹出层 -->
    <!-- 表格设置弹出层 -->
    <table-set
      :show.sync="showSetting"
      :setting-id="settingId"
      :select-options="columnDatas"
      :sort-field="sortField"
      :sort-method="sortMethod"
      :show-sort="showCustomSort"
      :sort-search.sync="sortSearch"
      :tab-index="tableConfig.tabIndex"
      :table-setting="tableSetting"
      @update-table="updateTable"
      @update-setid="updateSettingId"
      @clear="clearSetting"
    />
    <!-- 表格设置弹出层 -->
  </div>
</template>

<script>
  import { UTableColumn, UTable, UxGrid, UxTableColumn} from 'umy-ui';
  import Sortable from 'sortablejs'
  import { getStore, setStore } from '../TableBox/util/store'
  import tableSearch from "../TableBox/components/table-search";
  import CombineFilter from "../TableBox/lnk-combinefilter/lnk-combinefilter";
  import tableSet from "../TableBox/components/tableSet";
  import Pagination from "../TableBox/components/pagination";
  import Paginations from "../TableBox/components/paginations";
  import MyRender from '../MyRender'
  import {
    getTableData,
    getDictByType,
    getBtns,
    getTableConfig,
    pageTableData,
    getTableEditData,
    saveTableConfig, 
    addTableConfig
  } from "../TableBox/apis/table.data.js";

  import { toFormData } from "../TableBox/util";

  import operators from "../TableBox/util/operators";

  import Cookies from "js-cookie";
  /**
   * tableConfig:
   * interfacePath:表格查询接口访问地址
   * otherId: 如需根据ID查询
   * order:【desc/asc】降序/升序
   * sort:传字段名称，按照字段名称排序
   * pageFlag：是否分页，不分页传false拉全部
   * onlyCountFlag：传true只返回查询相关计数
   * onlySearchBar:只展示搜索框
   * hideSearchBar:隐藏搜索框,组合查询
   * hideFuncBar:隐藏搜索、按钮、收藏
   * sortersRow: [{'id':'','property':'要查询的字段id','direction':'ASC/DESC/升序/降序'}
   * 
   * editConfig:
   *  mode:'cell', // 编辑模式，cell（单元格）,row（行）
   *  activeMethod:null,//该方法 Function({row, rowIndex, column, columnIndex}) 的返回值用来决定该单元格是否允许编辑
   *  rules:{} // 表格校验规则配置项
  */

  /**
   * filtersRaw:【查询条件】
   * id:传''
   * property:要查询的字段id
   * operator:查询界面传=，组合查询界面按照情况
   * value:要匹配的值
   *  */
  /**
   * paramsRaw:json对象字符串【辅助条件】
   * showSelection:是否显示多选列
   */
  /**
   * @row-click 【获取当前点击表格行数据/列信息/事件】
   * 返回数据 Object
   * row: 当前行绑定数据
   * column: 当前列绑定数据
   * event: 当前点击事件
   */

  /**
   * @selection-change【表选checkbox选择发生变化时】
   * 返回数据 Array 当前选择行绑定的值
   */
  export default {
    name: "PlxTableBox",
    components: {
      tableSearch,
      CombineFilter,
      Pagination,
      Paginations,
      tableSet,
      MyRender,
      UxGrid, 
      UxTableColumn
    },
    filters: {
      formatters: function (val, format) {
        if (typeof format === "function") {
          return format(val);
        } else return val;
      },
      formatAmount: function (num, thousands = false) {
        if (!num) return '0'
        if (!/^[0-9].*$/.test(num)) return num
        const money = ('' + num).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
        const subMoney = money.substring(money.indexOf('.'))
        if (thousands) {
          return money
        }
        return money.indexOf('.') === -1 ? money + '.00' : (subMoney.length === 2 ? money + '0' : money)
      },
      statusFormat: function (status, dict) {
        try{
          if(status===undefined || status===null || status==='') return ''
          
          let dictList = []
          if(dict.list && dict.list instanceof Array && dict.list.length>0){
            dictList=dict.list
          }else if(dict && dict.dictTypeCode){
            const { dictTypeCode, appCode, domainCode }=dict
            const dictName=`${domainCode}_${appCode}_${dictTypeCode}`
            if(getStore({name: dictName, type: 'session'})) {
              /* const dictObj = getStore({name: dictName, type: 'session'}).find(item => item.dictCode === `${status}`)
              if(dictObj) {
                return dictObj.dictName
              } */
              dictList = getStore({name: dictName, type: 'session'})
            }
          }
          if(dictList.length>0){
            let codes=[]
            if (!(status instanceof Array)) {
              codes = `${status}`.split(',')
            }else{
              codes= status
            }
            const names=[]
            for (const code of codes) {
              if(code!==undefined && code!==null && code!==''){
                for (const d of dictList) {
                  if (d.dictCode.toString() === code.toString()) {
                    names.push(d.dictName)
                    continue
                  }
                }
              }
            }
            if(names.length>0){
              return names.join(',')
            }
          }
          return status
        }catch(err){
          return status
        }
      }
    },
    props: {
      tableConfig: {
        // 表格所需基本配置：请求地址、按钮列表
        type: Object,
        default: function () {
          return {
            interfacePath: "",
            apiHeader:null, // 发送请求的header参数
            otherId: "",
            btnList: [],
            sortersRow: [],
            pageSize: 10,
            tablePage: [10, 20, 30, 50, 100],
            order: "desc",
            sort: "id",
            pageFlag: true,
            onlyCountFlag: false,
            onlySearchBar: false,
            onlySettingBtn:false,//是否只显示设置按钮
            hideSearchBar:false,
            hideBtnMore:false,
            setting: [],
            tabIndex: 0,
            buttonGroupCode: "default",
            editConfig:null, // 表格编辑配置项
            checkboxConfig:null // 表格复选框配置项
          };
        }
      },
      defaultSearch: {
        type: String,
        default: ''
      },
      combineAutoRequest: {
        type: Boolean,
        default: true
      }, // 组合查询确认后是否自动刷新列表
      settingAutoRequest: {
        type: Boolean,
        default: false
      }, // 自定义表格初始化时自动远程刷新列表
      showCustomSort: {
        type: Boolean,
        default:true
      }, // 是否显示自定义排序
      showCustomSetting: {
        type: Boolean,
        default: true
      }, // 是否显示表格自定义设置
      showCustomCombine: {
        type: Boolean,
        default: true
      }, // 是否显示表格组合查询设置
      showCustomCollect: {
        type: Boolean,
        default: true
      }, // 是否显示表格收藏设置
      offSet: {
        type: Number,
        default: 0
      },
      buttonUrl: {
        type: String,
        default: '/ucenter/api/v2/button/currentUser'
      },
      selectedArry: {
        type: Array,
        default: function() {
          return []
        }
      },
      tableHeight: {
        type: Number,
        default: null
      },
      tableMaxHeight:{
        type: Number,
        default: null
      },
      noRequest: {
        type: Boolean,
        default: false
      },
      hasDefaultSearch: {
        type: Boolean,
        default: true
      },
      autoScroll: {
        type: Boolean,
        default: true
      },
      tableRowKey: null,
      tableExpandRowKeys: null,
      tableSpanMethod: null,
      tableDefaultExpandAll: {
        type: Boolean,
        default: false
      },
      tableRowClassName: null,
      tableCellClassName:null,
      tableTreeProps: {
        type: Object,
        default: function () {
          return {}
        }
      },
      otherFilters: {
        type: Array,
        default: function () {
          return []
        }
      },
      otherRaw: {
        type: [Object,String],
        default:()=>{}
      },
      tableSize:{
        type:String,
        default:'small'
      },
      showSelection:{
        type:Boolean,
        default:false
      },
      showIndex:{
        type:Boolean,
        default:false
      },
      showPage:{
        type:Boolean,
        default:true
      },
      clickRowSelection:{
        type:Boolean,
        default:true
      },
      data:{
        type:Array,
        default:()=>[]
      },
      dragable:{
        type:Boolean,
        defualt:false
      }, // 是否允许拖拽列
      // summaryMethod:null,
      tableSortable:{
        type:Boolean,
        default:true
      },
      // 按钮位置
      btnAlign:{
        type:String,
        defualt:'' // 默认居左， right:当表格功能区只有按钮时，靠右对齐
      }
    },
    data() {
      return {
        timeDisableOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        originTableSetting:{},
        tableDifferenceColumns: [],//非setting配置的列集合
        tableNewHeight: null, // 表格高度
        editChangeIndex: null, // 行内编辑索引
        editChangeField: null, // 行内编辑字段
        remoteSelectEventData: {}, // 行内编辑下拉远程配置
        remoteLoading: false, // 行内远程搜索加载
        remoteUrl: '', // 行内远程搜索url
        tableData: [], // 表格数据
        columnDatas: [], // 表格列信息
        settingId: "", // 配置id
        sortField: "", // 排序字段
        sortMethod:this.tableConfig.order==='asc'?'ascending':"descending", // 排序方法
        sortSearch: "", // 搜索字段
        isDataLoad: false,
        noTableDataHeight: 400,
        showSetting: false, // 自定义弹出层
        tableSetting: [],
        tableDataLoading: false,
        showCombFilter: false, // 控制组合查询弹框
        showChooseSearch: true, // 控制组合查询弹框
        hasSearchConditions: [], // 已查的条件
        quickConditions: [], // 其他查询条件
        conditonTags: [], // 查询条件的tag标签显示
        tableRequest: {
          page: 1,
          rows: this.tableConfig.pageSize || 10,
          tablePage: this.tableConfig.tablePage || [10, 20, 30, 50, 100],
          sort: this.tableConfig.sort || "",
          order: this.tableConfig.order || "",
          pageFlag: this.tableConfig.pageFlag != false ? true : false,
          onlyCountFlag: this.tableConfig.onlyCountFlag || false,
          filtersRaw: [],
          filtersRawTemp: [],
          tableTotal: 0,
          sortersRow: this.tableConfig.sortersRow || [],
          paramsRaw:this.otherRaw || {}
        },
        operators,
        outerBtns: [],
        innerBtns: [],
        newpages: false,
        dictTypeArr: [],
        listenFunc: null, // 键盘keydown监听
        listenKeyUpFunc: null, // 键盘keyup监听
        keyUp: false, // 是否键盘按下操作
        keyCode: null, // 键盘按下的值存储
        notShiftIndex: null, // 上一个不是shift的操作的值
        multipleSelection: [], // 选中的数据
        selectionRows:[],//多选框选中的数据
        columnKey: 0,
        setIntervalTime: 0,
        setIntervalNumber: null,
      };
    },
    computed: {
      selectTableRow() {
        return this.multipleSelection.map(item => {
          return item.keyIndex;
        });
      },
      // 工具栏是否显示更多按钮
      showDropdown(){
        const showSearch = !this.tableConfig.hideSearchBar  || this.tableConfig.onlySearchBar
        const showCombine = showSearch && this.showCustomCombine
        const showInnerBtn= this.innerBtns.length>0 ? true : false
        const showSetting = this.showCustomSetting && this.tableConfig.setting && this.tableConfig.setting.length>0
        if(showInnerBtn){
          return true
        }else{
          // 若隐藏搜索，则更多下拉框不显示（隐藏搜索后组合查询不显示）
          if(this.tableConfig.hideSearchBar){
            return false
          }else{
            return showCombine || showSetting
          }
        }
      },
      // 表格编辑配置
      tableEditConfig(){
        return (this.tableConfig && this.tableConfig.editConfig) || null
      },
      // 表格复选框配置
      tableCheckboxConfig(){
        return (this.tableConfig && this.tableConfig.checkboxConfig) || null
      },
      // 是否有表格自定义设置 ,无按钮不进行表格设置初始化请求
      settingEnable(){
        if(this.settingAutoRequest) return true
        if(this.tableConfig.hideFuncBar){
          return false
        }
        if(!this.tableConfig.setting || this.tableConfig.setting.length===0){
          return false
        }
        if(!this.showCustomSetting){
          return false
        }
        if(this.tableConfig.onlySettingBtn){
          return true
        }
        return true
      },
    },
    watch: {
      selectedArry(val) {
        this.multipleSelection = val
      },
      isDataLoad: function (val) {
        this.newHeight();
        // 动态更改页面的高度
        const _this = this;
        window.addEventListener("resize", this.newHeight);
        // 隐藏功能区和隐藏搜索框则不加载组合查询条件等数据
        setTimeout(() => {
          const headCols = this.$refs.plxTable.$children[0].$children[0].$children
          // 获取表格列：fullColumn 全量表头列
          const {fullColumn} = this.$refs.plxTable.getTableColumn();
          const exIncludesClos=['checkbox','index','expand'] // 不参与查询的列
          // 遍历全部表头列
          fullColumn.forEach(el => {
            const {property,title,type} = el // 字段
            if(exIncludesClos.includes(type)) return
            const _index = this.tableConfig.setting ? this.tableConfig.setting.findIndex(v=>v.prop === property) : -1
            if(_index>-1){
              const col = this.tableConfig.setting[_index]
              if(col.type !=='hidden'){
                this.columnDatas.push({
                  field: col.prop,
                  name: col.label,
                  sort:col.sort ===false?false:true,
                  type: col.type || "normal",
                  lov: col.propEnum || "",
                  options: col.type === "select" ? this.getFieldChooseData(col.propEnum) : [],
                  optionsRequest: col.propInterface || "",
                  isTrim:col.isTrim!==false
                });
              }
            }else{
              const col = headCols.find(v=>v.field === property )
              this.columnDatas.push({
                field:property,
                name: title,
                sort:col && col.$attrs["sort"] ===false?false:true,
                type: "normal",
                lov: "",
                options: [],
                optionsRequest: "",
                isTrim:col && col.$attrs["is-trim"]!==false
              });
            }
          });
        }, 300);
      
      },
      data:{
        handler(val,oldVal){
          if(!val || val.length.length===0){
            this.tableData = []
            return
          }
          // console.log('table获取到数据',val.length,this.tableConfig.setting)
          this.tableData = this.updateTableBoxData(val)
        },
        deep:true,
        immediate:true
      },
      // 监听表格设置延迟保存的倒计时
      setIntervalTime(num) {
        const { setIntervalNumber = null } = this
        if (!num || num <= 0) {
          clearInterval(setIntervalNumber)
          this.setIntervalNumber = null
          const { setting = [] } = this.tableConfig
          this.alterSet(setting)
        }
      },
      'tableConfig.setting':{
        handler(val,oldVal){
          this.columnKey += 1 // 强制渲染表格列
          // this.resetLayout()
        },
        deep:true,
      }
    },
    created() {
      this.originTableSetting =  this.deepClone(this.tableConfig) || {}; // 存原始配置
      // 缓存数据字典
      this.tableConfig.setting && this.tableConfig.setting.forEach(item => {
        if(item.propEnum && item.propEnum.dictTypeCode && item.propEnum.dictTypeCode != '' ) {
          const { dictTypeCode, appCode, domainCode }=item.propEnum
          const dictName=`${domainCode}_${appCode}_${dictTypeCode}`
          const dictData=getStore({name: dictName, type: 'session'})
          // 判断当前值列表是否存在，若不存在则重新请求数据字典接口获取值列表
          if(!dictData || typeof dictData!=='object' || dictData.length===0) {
            const params={ dictTypeCode, appCode, domainCode }
            getDictByType(params).then(res => {
              if(res.data && typeof res.data !=='string'){
                setStore({name: dictName, content: res.data || [], type: 'session'})
              }
            })
          }
        }
      })
      if (this.noRequest === false) {
        this.initTableData();
      }
      this.getTableSetting();
      this.tableConfig.onlySearchBar = this.tableConfig.onlySearchBar || false;
      this.tableConfig.hideSearchBar = this.tableConfig.hideSearchBar || false;
      this.tableConfig.hideFuncBar = this.tableConfig.hideFuncBar || false;
      if (this.tableConfig.btnList && this.tableConfig.btnList.length > 0) {
        this.outerBtns = this.tableConfig.btnList.filter(item => {
          return item.outerFlag === true;
        });
        this.innerBtns = this.tableConfig.btnList.filter(item => {
          return (
            item.hasOwnProperty("outerFlag") === false || item.outerFlag === false
          );
        });
      } else if (
        this.tableConfig.hideFuncBar === false &&
        this.tableConfig.onlySearchBar === false 
      ) {
        this.initBtns();
      }
      // this.tableSetting = this.deepClone(this.tableConfig.setting);

      // -------键盘事件监听---用于多选单选
      this.listenFunc = e => {
        this.keyUp = false;
        this.keyCode = e.keyCode;
      };

      this.listenKeyUpFunc = e => {
        this.keyUp = true;
        this.keyCode = null;
      };
      window.document.addEventListener("keydown", this.listenFunc);
      window.document.addEventListener("keyup", this.listenKeyUpFunc);
    },
    beforeDestroy() {
      window.document.removeEventListener("keydown", this.listenFunc);
      window.document.removeEventListener("keyup", this.listenKeyUpFunc);
      window.removeEventListener("resize", this.newHeight);      
      if (this.sortable) {
        this.sortable.destroy()
      }
    },
    mounted() {
      if (!this.isDataLoad) {
        this.noDataHeight();
      }

      this.$nextTick(()=>{
        this.initDragColumn()
      })
    },
    methods: {
      getRowFormatters(row, fnc) {
        if (typeof fnc === "function") {
          return fnc(row);
        } else return fnc;
      },      
      /**
       * 获取指定行下拉选项
       * @param {object} row 指定行
       * @param {Function} optionFnc 下拉选项回调
       * @return {Array} 下拉选项列表
      */
      getRowOptions(row, optionFnc) {
        if(!optionFnc) return []
        if (typeof optionFnc === "function") {
          return optionFnc(row);
        } else return optionFnc;
      },
      /**
       * 判断指定行字段是否可编辑
       * @param {object} row 指定行
       * @param {Function} disabledFnc 是否可编辑回调函数
       * return {Boolean} true / false
      */
      getRowDisabled(row, disabledFnc) {
        if(!disabledFnc) return false
        if (typeof disabledFnc === "function") {
          return disabledFnc(row);
        } else return true;
      },
      // 选择框值改变
      handleEditChange(row, column,feild) {
        this.$refs.plxTable.updateStatus({ row, column })
        this.$emit("edit-change", row, feild)
      },
      // 文本框输入值变化
      handleEditInInputput(row, column,feild) {
        this.$refs.plxTable.updateStatus({ row, column })
        this.$emit("edit-input", row, feild)
      },
      // 行内编辑下拉框获取焦点
      handleEditFocus(ev) {
        if (ev) {
          this.remoteSelectEventData = ev
          if(ev.dataUrl && ev.dataUrl !== '' && !ev.getEditData) {
            let defaultProps = ev.defaultProps ? ev.defaultProps : { label: 'label', value: 'value' }
            getTableEditData(ev.requestMethod,ev.dataUrl,ev.paramField).then(res => {
              let dataList = []
              if (Object.keys(res.data).indexOf('records') === -1) {
                dataList = res.data || []
              } else {
                dataList = res.data.records || []
              }
              ev.selectData =  dataList.map(item => {
                return { value: item[defaultProps.value], label: item[defaultProps.label] }
              })
              ev.getEditData = true
            })
          }
        }
      },
      // 改变当前所在行内编辑的值
      setEditValue(val) {
        let columnName = this.editChangeField
        this.$refs.plxTable.data[this.editChangeIndex][columnName] = val
      },
      // 行内picklist点击
      pickListClick(row, column) {
        const columnName = column.columnKey || column.property
        this.editChangeIndex = row.keyIndex
        this.editChangeField = columnName
        this.$emit("picklist-click", row, columnName)
      },
      // 远程搜索
      remoteSelections(query,data) {
        if (query.trim() == '') {
          return
        }
        let defaultProps = data.defaultProps ? data.defaultProps : { label: 'label', value: 'value' }
        let rqUrl = data.remoteUrl
        let rqParam = data.paramField ? data.paramField : ''
        let rqMethod = data.requestMethod ? data.requestMethod : 'get'
        this.remoteLoading = true
        getTableEditData(rqMethod,rqUrl,{[rqParam]:query}).then(res => {
          let dataList = []
          if (Object.keys(res.data).indexOf('records') === -1) {
            dataList = res.data || []
          } else {
            dataList = res.data.records || []
          }
          data.selectData = dataList.map(item => {
            return { value: item[defaultProps.value], label: item[defaultProps.label] }
          })
          this.remoteLoading = false
        }).catch(()=>{
          this.remoteLoading = false
          data.selectData = []
        })
      },
      // 点击tag打开组合查询
      openCombinefilter() {
        this.showCombFilter = true;
      },
      // 深拷贝
      deepClone(source) {
        if (!source && typeof source !== "object") {
          // throw new Error('error arguments', 'deepClone')
          return;
        }
        const targetObj = source.constructor === Array ? [] : {};
        Object.keys(source).forEach(keys => {
          if (source[keys] && typeof source[keys] === "object") {
            targetObj[keys] = this.deepClone(source[keys]);
          } else {
            targetObj[keys] = source[keys];
          }
        });
        return targetObj;
        // return JSON.parse(JSON.stringify(source || []))
      },
      // 获取表格配置
      async getTableSetting() {
        if (!(Cookies.get("Admin-Token") || Cookies.get('QUP-COMPONENT-TOKEN')) || !this.$route.query.menuCode) {
          this.isDataLoad = true;
        }
        // 判断是否可操作表格自定义设置，不可操作则不请求表格设置数据
        if(!this.settingEnable || !this.$route.query.menuCode){
          this.isDataLoad = true;
          this.sortField =  this.tableConfig.sort || ""
          this.tableRequest.sort = this.sortField || ""
          if (this.tableConfig.sort) {
            this.tableRequest.order = this.sortMethod =='descending' ? 'desc' : 'asc'
          }
          
          setTimeout(() => {
            this.sortSearch = "";
          }, 300);
          this.tableSetting = this.deepClone(this.tableConfig.setting) || [];
          this.initDragColumn()
          return
        }
        // 获取本地表格信息
        const { tabIndex = null } = this.tableConfig
        const localSetting = localStorage.getItem(`${window.location.href}&tabIndex=${tabIndex}`)
        await getTableConfig({
          menuCode: this.$route.query.menuCode || "",
          tabIndex: this.tableConfig.tabIndex || 0
        }).then(res => {
          if (res.success === 1) {
            this.isDataLoad = true;
            if (res.data) {
              const { settingId = '', sortField = '', sortMethod = null, sortSearch = '', content = '' } = res.data
              this.settingId = settingId;
              this.sortField = sortField || this.tableConfig.sort || ""
              this.sortMethod = sortMethod;
              this.tableRequest.sort = this.sortField
              if (this.tableConfig.sort) {
                this.tableRequest.order = this.sortMethod =='descending' ? 'desc' : 'asc'
              }
              // this.initTableData();
              if (this.noRequest === false) {
                this.initTableData();
              }
              setTimeout(() => {
                this.sortSearch = sortSearch || "";
              }, 300);
              if (content && content !== "") {
                this.renderSetting(content)
              }else{
                this.renderSetting(localSetting)
              }
            }else{
              this.renderSetting(localSetting)
            }
          }else{
            this.renderSetting(localSetting)
          }
          this.tableSetting = this.deepClone(this.tableConfig.setting)  || []
        });
        this.initDragColumn()
      },
      renderSetting(content){
        if(!content) return
        let contentArr=[]
        try{
          contentArr = JSON.parse(content, function (k, v) {
            if (v.indexOf && v.indexOf("function") > -1) {
              /* eslint-disable no-eval */
              // TODO: clickFun 解析出错
              try {
                return eval("(function(){return " + v + " })()");
              } catch (error) {
                console.log(error)
              }
            }
            return v;
          });
        }catch (error){
          console.log(error)
          contentArr = []
        }
        if(contentArr.length===0) return 
        
        const oldSetting = this.deepClone(this.tableConfig.setting) || [];
        oldSetting.forEach((item, oldIndex)=>{
          item.index = oldIndex
          contentArr.forEach(arrItem=>{
            if(item.prop === arrItem.prop){
              const {index, label, width, fixed = '', hidden = false} = arrItem
              item.index = index
              item.label = label
              item.width = width
              item.fixed = fixed
              item.hidden = hidden
            }
          })
        })
        const newSetting = this.deepClone(oldSetting.sort(this.compare('index'))) || []
        newSetting.forEach((item, index)=>{
          item.index = index
        })
        if (newSetting && newSetting.length) {
          this.$set(this.tableConfig, 'setting', newSetting)
          // this.columnKey += 1
          // this.resetLayout()
          // console.log('setting变更2','获取到存储的settting',newSetting)
        }
      },
      // 根据另一个数组排序
      sortFunc(propName, referArr) {
        return (prev, next) => {
          return (
            referArr.indexOf(prev[propName]) - referArr.indexOf(next[propName])
          );
        };
      },
      compare(key) {
        return function (obj1, obj2) {
          let val1 = obj1[key];
          let val2 = obj2[key];
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        }
      },
      // 获取搜索数据
      getSearchData(data) {
        this.$emit("search-change", data);
      },
      getAllFilters() {
        return {
          searchBarFilter: this.tableRequest.filtersRawTemp,
          combineFilter: this.quickConditions
        };
      },
      // 更新表格配置ID
      updateSettingId() {
        getTableConfig({
          menuCode: this.$route.query.menuCode || "",
          tabIndex: this.tableConfig.tabIndex || 0
        }).then(res => {
          if (res.success === 1) {
            if (res.data) {
              this.settingId = res.data.settingId
            }
          }
        })
      },
      // 更新表格配置
      updateTable(data) {
        this.alterTableConfig(data);
        data.forEach(item => {
          this.columnDatas.forEach(el => {
            if (item.prop === el.field) {
              el.name = item.label;
            }
          });
        });
        getTableConfig({
          menuCode: this.$route.query.menuCode || "",
          tabIndex: this.tableConfig.tabIndex || 0
        }).then(res => {
          if (res.success === 1) {
            if (res.data) {
              const {  sortField = '', sortMethod = null} = res.data              
              this.sortField = sortField || "";
              this.sortMethod = sortMethod;
              this.tableRequest.sort = this.sortField;
              if (this.tableConfig.sort) {
                this.tableRequest.order = this.sortMethod =='descending' ? 'desc' : 'asc'
              }
              this.initTableData();
            }
          }
        })
      },
      alterTableConfig(data) {
        this.$set(this.tableConfig, 'setting', data)
        // this.columnKey += 1
        // this.resetLayout()
        // console.log('setting变更4')
      },
      // 打开组合查询
      showCombineFilter(msg) {
        this.showCombFilter = msg;
      },
      // 行样式设置
      rowClass({ row, rowIndex }) {
        row.keyIndex = rowIndex;
        return {
            // "background-color": "#DCF5ED"
            "background-color":this.selectTableRow.includes(row.keyIndex)? '#CDF4E8':'white'
          };
      },
      // 点击表当某一行
      tableRowHandle(row, column, event) {
        if(this.tableEditConfig && this.tableEditConfig.mode==='row'){
          // 当表格行编辑时触发
          this.setActiveRow(row)
        }
        // ---------------------------实现表格多选单选
        /* if (this.keyCode === 17 && !this.keyUp) {
          // ctrl
          if (this.selectTableRow.includes(row.keyIndex)) {
            this.multipleSelection.splice(this.selectTableRow.indexOf(row.keyIndex), 1);
          } else {
            this.multipleSelection.push(row)
          }

        } else if (
          this.keyCode === 16 &&
          !this.keyUp &&
          this.multipleSelection.length > 0
        ) {
          // shift
          const starIndex = this.notShiftIndex;
          const endIndex = row.keyIndex;
          this.multipleSelection = [];

          starIndex < endIndex ? this.multipleSelection = this.tableData.filter(rangeItemA => {
            return rangeItemA.keyIndex >= starIndex && rangeItemA.keyIndex <= endIndex
          }) : this.multipleSelection = this.tableData.filter(rangeItemB => {
            return rangeItemB.keyIndex <= starIndex && rangeItemB.keyIndex >= endIndex
          })
        } else {
          // 其他
          this.multipleSelection = [];
          this.multipleSelection.push(row);
        }

        if (this.keyCode !== 16) {
          this.notShiftIndex = row.keyIndex;
        } */
        if(this.clickRowSelection===true && this.showSelection===true){
          if (this.selectTableRow.includes(row.keyIndex)) {
            this.multipleSelection.splice(this.selectTableRow.indexOf(row.keyIndex), 1);
          } else {
            this.multipleSelection.push(row)
          }
        }else{
          if(this.showSelection!==true){
            this.multipleSelection=[row];
          }
        }
        this.$emit("update:selectedArry", this.multipleSelection);
        // --------------end

        // 开放到外层的row-click
        this.$emit("row-click", {
          row,
          column,
          event
        });
      },
      // 双击表格行
      tableRowDblclick(row, event) {
        this.$emit("row-dblclick", row, event);
      },
      // 单击单元格
      tableCellClick(row, column, cell, event){
        this.$emit("cell-click", row, column, cell, event);
      },
      // 表格选择发生变化
      handleSelectionChange(val) {
        this.selectionRows=val
        this.$emit("selection-change", val);
      },
      // 当用户手动勾选数据行的 Checkbox 时触发的事件
      handleSelect(selection, row) {
        this.$emit("select", selection, row);
      },
      // 当用户手动勾选全选 Checkbox 时触发的事件
      handleSelectAll(selection) {
        this.$emit("select-all", selection);
      },
      // 当用户对某一行展开或者关闭的时候会触发该事件
      expandChange(row, expandedRows) {
        this.$emit("expand-change", row, expandedRows);
      },
      // 重新布局表格
      resetLayout() {
        this.$refs.plxTable && this.$refs.plxTable.doLayout(true);
      },
      // 获取对应数据字典
      getFieldChooseData(lov) {
        let fieldChoose = []
        if(lov.list && lov.list instanceof Array && lov.list.length>0){
          fieldChoose = lov.list
        }else{
          if(lov.domainCode && lov.appCode && lov.dictTypeCode){
            const dictName=`${lov.domainCode}_${lov.appCode}_${lov.dictTypeCode}`
            fieldChoose = getStore({name: dictName, type: 'session'})
          }else{
            fieldChoose = getStore({name: lov, type: 'session'})
          }
        }
        this.dictTypeArr.push(fieldChoose)
        return fieldChoose
      },
      newHeight() {
        this.$nextTick(() => {
          if (!this.tableHeight && !this.tableMaxHeight) {
            const setMainTop = this.$refs.functionBox.offsetTop;
            const setTop = this.$refs.plxTable.$el.offsetTop;
            const footerHeight = this.$refs.functionFooter.offsetHeight + 6 + (this.showPage?48:0)  // 功能区底部高度(48 分页高度) 加6px是为了解决部分页面超出界面出现不停晃动的问题
            const parentNodes = [] // 功能区所有父级
            const offsetTops = []
            let topHeight = 0  //功能区距离顶部body的距离
            // 查找功能区所有父级
            const getParentNode = (node)=>{
              const pNode = node.offsetParent
              if(pNode){
                parentNodes.unshift(pNode)
                const top = pNode.offsetTop
                topHeight += top
                offsetTops.unshift(top)
                if(pNode===document.body) return
                getParentNode(pNode)
              }
            }
            getParentNode(this.$refs.functionBox)
            // 判断是否在iframe中
            if (self !== top) {
              // this.tableNewHeight = window.innerHeight - setMainTop - setTop - 53 + this.offSet;
              this.tableNewHeight = window.innerHeight - topHeight - setMainTop - setTop - footerHeight + this.offSet;
            } else {
              // this.tableNewHeight = window.innerHeight - setMainTop - setTop - 144 + this.offSet;
              this.tableNewHeight = window.innerHeight - topHeight  - setMainTop - setTop - footerHeight + this.offSet;
            }
          } else {
            this.tableNewHeight = this.tableHeight;
          }
        });
      },
      // 刷新表格高度
      refreshTableHeight(){
        this.newHeight()
      },
      noDataHeight() {
        this.$nextTick(() => {
           if (!this.tableHeight) {
              const setMainTop = this.$refs.functionBox.offsetTop;
              const setTop = this.$refs.tableBoxNoData.offsetTop;
              // 判断是否在iframe中
              if (self !== top) {
                this.noTableDataHeight =
                  window.innerHeight - setMainTop - setTop - 53 + this.offSet;
              } else {
                this.noTableDataHeight =
                  window.innerHeight - setMainTop - setTop - 144 + this.offSet;
              }
           }else{
              this.noTableDataHeight = this.tableHeight;
           }
        });
      },
      initTableData(flag, filters, otherId) {
        if(!this.tableConfig || !this.tableConfig.interfacePath && this.data){
          return
        }
        this.tableDataLoading = true;
        // flag--search/pagination/opCondition
        // 有点击ID传入
        if (otherId) {
          this.tableConfig.otherId = otherId;
        }
        // 搜索重置页码
        if (flag === "search" && filters) {
          this.tableRequest.page = 1;
          this.tableRequest.filtersRawTemp = filters;
          this.resetPage();
        }

        // 条件改变，重置页码
        if (flag === "opCondition") {
          this.tableRequest.page = 1;
          this.resetPage();
        }
        if (!flag) {
          this.tableRequest.page = 1;
          this.resetPage();
        }
        //判断是否为json字符串
        var isJson = this.isJsonString(flag)
        if(isJson){
          flag = JSON.parse(flag)
        }
        this.tableRequest.filtersRaw = this.tableRequest.filtersRawTemp
        .concat(this.otherFilters)
        .concat(this.quickConditions);
        // 拼接快捷查询和组合查询选择的查询条件
        // 判断用户是否是输入框失去焦点（换取查询总条数）
        if (flag && flag !== "search" && flag !== "opCondition" && flag !== "onPage") {
          if(isJson && flag.onlyCountFlag == true){
            this.newpages = true;
            this.tableRequest.onlyCountFlag = true;
          }
          if(isJson && flag.page){
            this.tableRequest.page = flag.page
          }
        }
        // console.log('请求前的页码:'+this.tableRequest.page)
        if (filters === "chengPage") {
          this.tableRequest.page = 1;
          // console.log('进入重置页码')
        }
        // 判断用户是否是输入框失去焦点（换取查询总条数）结束
        if (flag === 'onPage') {
          this.tableRequest.page = this.tableRequest.page;
        }
        this.tableRequest.paramsRaw=this.otherRaw || {}
        this.tableRequest.order = this.sortMethod =='descending' ? 'desc' : 'asc'
        getTableData(
          this.tableConfig.interfacePath,
          toFormData(this.tableRequest),
          this.tableConfig.otherId,
          this.tableConfig.apiHeader
        ).then(res => {
          this.tableRequest.onlyCountFlag = false;
          this.tableDataLoading = false;
          // this.tableData = res.data.records;
          this.tableData = this.updateTableBoxData(res.data.records);
          // this.reloadData(this.tableData)
          this.$emit("data-change", res);
          this.tableRequest.tableTotal = res.data.total*1;
          this.tableRequest.page = res.data.page
          window.setTimeout(() => {
            this.$refs.pageRef && this.$refs.pageRef.freshInfo();
          }, 300);
          // 分页组件请求修改（开始）
          if (isJson && flag.page * res.data.rows > res.data.total) {
            this.tableRequest.page = Math.ceil(res.data.total / res.data.rows);
          }
          if (isJson && flag.onlyCountFlag == true) {
            pageTableData(
              this.tableConfig.interfacePath,
              toFormData(this.tableRequest),
              this.tableConfig.otherId,
              this.tableConfig.apiHeader
            ).then(res => {
              this.tableDataLoading = false;
              // this.tableData = res.data.records;
              this.tableData = this.updateTableBoxData(res.data.records);
              // this.reloadData(this.tableData)
              this.$emit("data-change", res);
              this.tableRequest.page = res.data.page;
              this.tableRequest.tableTotal = res.data.total * 1;
              // if(isJson){
              //   this.tableRequest.page = flag.page * 1;
              // }
              window.setTimeout(() => {
                this.$refs.pageRef && this.$refs.pageRef.freshInfo();
              }, 300);
            })
            .catch(() => {
              this.tableDataLoading = false;
            });
          }
          // 分页组件请求修改（结束)          
        })
        .catch(() => {
          this.tableDataLoading = false;
        });

        // 刷新后对之前的选中数据进行清空
        this.multipleSelection = [];
        this.$emit("update:selectedArry", this.multipleSelection);
      },
      // initTableData
      // 点击更多
      getMore(optCode) {
        switch (optCode) {
          case "combine":
            this.showCombFilter = true;
            break;
          case "setting":
            this.showTableSetting()
            break;
          default:
            this.$emit("btnOperate", optCode);
            break;
        }
      },
      // 自定义表格设置
      showTableSetting(){        
        /* const {fullColumn} = this.$refs.plxTable.getTableColumn();  // 获取所有列
        let obj1 = [], obj2 = []
        this.tableConfig.setting.forEach(item => {
          obj1.push({
            label: item.label,
            prop: item.prop,
            minWidth: item.minWidth
          })
        })
        fullColumn.forEach(item => {
          if(item.property) {
            obj2.push({
              label: item.title,
              prop: item.property,
              minWidth: item.width ? String(item.width) : String(item.minWidth)
            })
          }
        })
        this.tableDifferenceColumns = obj2.filter(item => {
          return obj1.every(todo => {
            return !todo.prop.includes(item.prop)
          })
        })
      
        setTimeout(() => {
          this.tableSetting = this.deepClone(this.tableConfig.setting) || [];
          this.tableSetting.push(...this.tableDifferenceColumns)
          this.showSetting = true;
        }, 100) */
        this.tableSetting = this.deepClone(this.tableConfig.setting) || [];
        this.showSetting = true;
      },
      formatConditions(data) {
        this.conditonTags = [];
        data.forEach(item => {
          const propertyArry = this.columnDatas.filter(filterItem => {
            return item.property.includes(filterItem.field);
          });
          const names = [];
          let selectItemOptions = []; // 存储选择项的select选项
          propertyArry.forEach(el => {
            names.push(el.name);
            selectItemOptions = el.options;
          });

          let showValue = item.value;
          if (names.length <= 1 && selectItemOptions.length !== 0) {
            // 如果不是多字段筛选且select可选项不为空--需匹配筛选值的中文
            let tempVal = JSON.parse(JSON.stringify(item.value));
            // if (typeof tempVal !== "object") {
            //   tempVal = [tempVal]
            // }

            showValue = selectItemOptions
            .filter(sitem => {
              return (
                tempVal.includes(Number(sitem.dictCode)) ||
                tempVal.includes(sitem.dictCode)
              );
            })
            .map(mitem => {
              return mitem.dictName;
            })
            .join();
          }

          if (propertyArry.length > 0) {
            this.conditonTags.push({
              name: names.join(),
              conditon: this.operators[
                item.property.indexOf("[") !== -1 ? "multi" : propertyArry[0].type
                ][item.operator],
              value: showValue
            });
          }
        });
      },
      // 1、获取组合查询值；2、获取收藏的查询条件
      getCombineFilter(data) {
        const filtersraw =[]
        // 遍历查询条件，重置条件为today（当天）的查询条件及查询时间值
        data.filtersraw.forEach(v=>{
          if(v.operator==='today'){
            filtersraw.push({
              ...v,
              ...{
                id:`${v.id}${data.filtersraw.length}`,
                operator:'>=',
                value:`${v.value} 00:00:00`
              }
            })
            filtersraw.push({
              ...v,
              ...{
                id:`${v.id}${data.filtersraw.length+1}`,
                operator:'<=',
                value:`${v.value} 23:59:59`
              }
            })
          }else{
            filtersraw.push(v)
          }
        })
        if (this.combineAutoRequest) {
          this.hasSearchConditions = data.results;
          this.quickConditions = filtersraw //data.filtersraw;
          this.initTableData("opCondition");
          this.formatConditions(data.filtersraw);
        } else {
          this.$emit('combine-change', filtersraw); //data.filtersraw
        }
      },
      delCondition(tagIndex) {
        this.updateQuickConditions(tagIndex)
        this.conditonTags.splice(tagIndex, 1);
        this.hasSearchConditions.splice(tagIndex, 1);
        this.initTableData("opCondition");
      },
      // 更新快捷查询条件(用于快递查询条件删除)
      updateQuickConditions(tagIndex){
        const obj = this.hasSearchConditions[tagIndex]
        if(obj && obj.condition==='today' && obj.field){
          // 删除查询条件为‘当天’的
          const startValue = `${obj.value} 00:00:00`
          const endValue = `${obj.value} 23:59:59`
          this.quickConditions =  this.quickConditions.filter(v=>{
            const flag = (v.operator==='>=' && v.value===startValue) || (v.operator==='<=' && v.value===endValue)
            return v.property!==obj.field && flag
          })
        }else{
          // 删除查询条件
          this.quickConditions.splice(tagIndex, 1);
        }
      },
      // 清空所有组合查询条件
      clearFilterItems(){
        this.conditonTags.forEach((tag,tagIndex)=>{
          this.updateQuickConditions(tagIndex)
        })
        this.conditonTags=[]
        this.hasSearchConditions=[]
        this.initTableData("opCondition");
      },
      initBtns() {
        // 菜单编码为空或只显示表格设置按钮，则不请求按钮数据
        if(!this.$route.query.menuCode || this.tableConfig.onlySettingBtn) return
        getBtns({
          menuCode: this.$route.query.menuCode,
          buttonGroupCode: this.tableConfig.buttonGroupCode || "default",
          url: this.buttonUrl
        }).then(res => {
          if(res.data){
            if(res.data.groovyList){
              this.outerBtns = res.data.groovyList.map(v=>{
                return {...v,...{optCode:v.buttonCode}}
              });
            }
            if(res.data.groupList){
              this.innerBtns = res.data.groupList.map(v=>{
                return {...v,...{optCode:v.buttonCode}}
              });
            }
          }
          this.newHeight()
        }).catch(()=>{
          this.newHeight()
        })
      },
      // 更新分页组件
      resetPage() {
        this.newpages = !this.newpages;
        this.$nextTick(() => {
          this.newpages = false;
        });
      },
      /**
       * @param [Array] rows :[{row,selected:true/false}]
      */
      toggleRowSelection(rows) {
        this.$refs.plxTable.toggleRowSelection(rows);
      },
      toggleAllSelection() {
        const selected = this.multipleSelection.length?false:true
        this.$refs.plxTable.toggleAllSelection(selected);
      },
      clearSelection() {
        this.$refs.plxTable.clearSelection();
      },
      setCurrentRow(row) {
        this.$refs.plxTable.setCurrentRow(row);
      },
      sortChange(data) {
        this.multipleSelection = []
        this.$emit("update:selectedArry", this.multipleSelection);
        this.$emit("sort-change", data);
      },
      isJsonString(str) {
        try {
          if (typeof JSON.parse(str) == "object") {
            return true;
          }
        } catch (e) {
        }
        return false;
      },
      // 拖动表头宽度更新列宽
      changeColWidth({ $rowIndex, column, columnIndex, $columnIndex, $event }) {
        if(!this.dragable) return
        const exclude=['index','selection']
        if(exclude.indexOf(column.type)>-1) return
        // 处理拖拽与表格组件兼容问题
        window.document.removeEventListener('selectstart', this.sortable)
        // 更新宽度
        const minWidth=column.minWidth || 0
        const newWidth = column.resizeWidth || 0
        const newSetting = this.deepClone(this.tableConfig.setting) || []
        newSetting.forEach((item) => {
          if (item.prop === column.property && item.label === column.title) {
            // item.width = Math.max(minWidth,newWidth) // 宽度不能小于最小宽度
            item.width = newWidth // 最小宽度不限制
            column.width = item.width
          }
        })
        this.saveSetting(newSetting)
      },
      // 初始化拖拽
      initDragColumn(){
        if(!this.dragable){
          return
        }
        // 阻止默认行为
        document.body.ondrop = function(event) {
          event.preventDefault()
          event.stopPropagation()
        }
        this.columnDrop()
      },
      columnDrop() {
        // 是否保存到数据库
        const saveFlag = this.tableConfig && this.tableConfig.setting && this.tableConfig.setting.length>0
        if(!saveFlag) return 
        this.$nextTick(() => {
          const plxTable = this.$refs.plxTable
          const wrapperTr = plxTable && plxTable.$el.querySelector('.elx-table--header-wrapper.body--wrapper .elx-table--header .elx-header--row')
          this.sortable =wrapperTr && Sortable.create(wrapperTr, {
            animation: 180,
            delay: 0,
            multiDrag: false,
            // 列表项中的拖动控制柄选择器 拖拽区域，默认为 .plx-header--row 的 子元素，
            // 下面（这个意思呢）是排除掉plx-header--column拖拽列中的固定列部分
            handle: '.elx-header--column:not(.col--fixed)',
            draggable: '.elx-header--row th',
            ghostClass: 'dragColbg',
            chosenClass: 'dragColbg',
            // 拖拽结束
            onEnd: ({ item, newIndex, oldIndex }) => {
              if (oldIndex === newIndex) return
              // console.log('可视区域column',newIndex,oldIndex)
              // fullColumn: 全量表头列   tableColumn: 当前渲染中的表头列
              const { fullColumn, tableColumn } = plxTable.getTableColumn()
              const oldProperty= tableColumn[oldIndex].property
              const newProperty= tableColumn[newIndex].property
              // 转换真实索引
              const oldColumnIndex = plxTable.getColumnIndex(tableColumn[oldIndex])
              const newColumnIndex = plxTable.getColumnIndex(tableColumn[newIndex])
              
              // console.log('转换真实索引',newColumnIndex,oldColumnIndex)
              if(!saveFlag){
                // 不允许保存时，只本地拖动更新，数据不保存
                const targetThElem = item
                const wrapperElem = targetThElem.parentNode
                const newColumn = fullColumn[newIndex]
                if (newColumn.fixed) {
                  // 错误的移动
                  if (newIndex > oldIndex) {
                    wrapperElem.insertBefore(targetThElem, wrapperElem.children[oldIndex])
                  } else {
                    wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem)
                  }
                  return this.$message({ message: '固定列不允许拖动！', status: 'error' })
                } 
                // 转换真实索引
                const oldColumnIndex = plxTable.getColumnIndex(tableColumn[oldIndex])
                const newColumnIndex = plxTable.getColumnIndex(tableColumn[newIndex])
                // 移动到目标列
                const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
                fullColumn.splice(newColumnIndex, 0, currRow)
                // 加载列
                plxTable.loadColumn(fullColumn)
                return
              }
              // 处理拖动列数据
              const slotsNum = this.$slots && this.$slots.before && this.$slots.before.length || 0
              const oldSetting = this.deepClone(this.tableConfig.setting) || []
              const settingFilter = oldSetting.filter(item => { return !item.hidden && !item.fixed })
              const isFixedItems = oldSetting.filter(item => { return item.fixed })
              const isFixedsLen = isFixedItems.length || 0 // 固定列数量
              let tmpCount = 0
              if(this.showSelection) tmpCount += 1 
              if(this.showIndex) tmpCount += 1
              const ignoreCount = slotsNum + isFixedsLen + tmpCount // 忽略数量 =  slot的数量 + 固定列数量 + 序号和勾选框数量
              const oldIndexTmp = oldColumnIndex - ignoreCount
              // console.log('oldIndexTmp',oldIndexTmp)

              // console.log('settingFilter[oldIndex]',evt.oldIndex,ignoreCount,oldIndex,settingFilter[oldIndex])
              const oldProp = settingFilter[oldIndexTmp]['prop']
              let oldPropIndex = null
              let newPropIndex = null
              const newIndexTmp = newColumnIndex - ignoreCount
              // console.log('newIndexTmp',newIndexTmp)

              const newProp = settingFilter[newIndexTmp]['prop']
              oldSetting.forEach((item, setIndex) => {
                item.prop === oldProp ? oldPropIndex = setIndex : null
                item.prop === newProp ? newPropIndex = setIndex : null
              })
              const oldItem = oldSetting[oldPropIndex]
              oldSetting.splice(oldPropIndex, 1)
              oldSetting.splice(newPropIndex, 0, oldItem)
              const newSetting = this.deepClone(oldSetting) || []
              newSetting.forEach((item, index) => { item.index = index })
              // console.log('newSetting',newSetting)
              this.saveSetting(newSetting)
            }
          })
        })
      },
      // 更新setting功能 保存本地并延迟条用保存接口
      saveSetting(newSetting, isCountdown = true) {
        const { tabIndex = null } = this.tableConfig
        if (newSetting && newSetting.length) {
          this.$set(this.tableConfig, 'setting', newSetting)
          // this.columnKey += 1 // 设置列key强制渲染表格
          // this.resetLayout()
          // console.log('setting变更2')
          const setting = JSON.stringify(newSetting, function(key, val) {
            if (typeof val === 'function') { return val + '' }
            return val
          })
          localStorage.setItem(`${window.location.href}&tabIndex=${tabIndex}`, setting)
          isCountdown && this.countDown()
        }
      },
      // 保存表格设置倒计时,默认延迟3s
      countDown(num = 3) {
        const { setIntervalNumber = null, setIntervalTime = 0 } = this
        if (setIntervalTime) {
          clearInterval(setIntervalNumber)
          this.setIntervalNumber = null
        }
        this.setIntervalTime = num
        this.setIntervalNumber = setInterval(()=>{
          this.setIntervalTime = this.setIntervalTime - 1
        }, 1000)
      },
      // 更新表格设置
      alterSet(newSetting) {
        if(!this.$route.query.menuCode) return
        newSetting.forEach(item => {
          if(parseInt(item.width) < 0){
            item.width = '0'
          }
        })
        const tData = JSON.stringify(newSetting, function(key, val) {
          if (typeof val === 'function') { return val + '' } return val
        })
        const saveData = { 
          menuCode: this.$route.query.menuCode,
          sortField: this.sortField, //默认排序字段
          sortSearch: this.sortSearch, // 默认搜索字段
          sortMethod: this.sortMethod, // 默认排序方式
          tabIndex: this.tableConfig.tabIndex,
          content: tData 
        }
        if (this.settingId === '') {
          addTableConfig(saveData).then(res => {
            if (res.success === 1) {
              this.updateSettingId()
              this.updateTable(newSetting)
            }
          })
        } else {
          saveTableConfig(saveData, this.settingId).then(res => {
            if (res.success === 1) {
              this.updateTable(newSetting)
            }
          })
        }
      },
      //=此处开始新增plxtable方法============================
      // 删除复选框选中的行数据
      removeCheckboxRow(){
        this.$refs.plxTable.removeCheckboxRow()
      },
      /**
       * 激活行状态-> 为编辑状态（适用于点击编辑按钮）
        只传row,则用于 edit-config，激活行编辑，如果是 mode=cell 则默认激活第一个单元格
        参数row,field用于 edit-config，激活单元格编辑 
       *  @param {Object} row 表格行数据
       *  @param {string} field 需编辑的单元格字段名称 
       */
      setActiveRow (row,field) {
        if(!row) return
        if(field){
          this.$refs.plxTable.setActiveRow(row,field)
        }else{
          this.$refs.plxTable.setActiveRow(row)
        }
      },
      //完整校验，和 validate 的区别就是会给有效数据中的每一行进行校验
      fullValidate(){
        return new Promise((resolve, reject) => {
          const fullValidate=this.$refs.plxTable.fullValidate()
          resolve(fullValidate)
        }).catch(error => {
          reject(error)
        })        
      },
      /* 
        快速校验
        1. 如果存在校验不通过的行，则返回不再继续校验；
        2. 如果参数为 true 则校验当前表格数据，
        3. 如果参数指定 row 或 rows 则校验指定行或多行，
        4. 返回一个 promise
      */
      validate(row=true){
        return new Promise((resolve, reject) => {
          const validate=this.$refs.plxTable.validate(row)
          /* this.$refs.plxTable.validate(row).then(data => {
            if (data) {
                resolve('校验不通过')
            } else {
              resolve('')
            }
          }) */
          resolve(validate)
        }).catch(error => {
          reject(error)
        })
      },
      //手动清除校验
      clearValidate(){
        this.$refs.plxTable.clearValidate()
      },
      /**
       * 往表格插入临时数据（不支持树结构）
       * @param {Array/Object} records 插入行的默认数据对象
       * @param {Number} row 指定位置：null从第一行插入、-1 从最后插入：只能是null 或者-1
      */
      async insertRow(records,rowIndex){
        let newRows = null
        if(records){
          if(records instanceof Array){
            newRows = this.updateTableBoxData(records)
          }else{
            if(records instanceof Object){
              newRows = this.updateTableBoxData([records])
            }
          }
        }
        return await this.$refs.plxTable.insertRow(newRows,rowIndex)
      },
      /*
      获取当前表格的数据
      （完整的全量表体数据、处理条件之后的全量表体数据、当前渲染中的表体数据、当前渲染中的表尾数据）
      {fullData, visibleData, tableData, footerData}
      */
      getTableData(){
        return this.$refs.plxTable.getTableData()
      },
      //加载数据并清除所有状态（对于表格数据需要重载、局部递增的场景中可能会用到）
      reloadData(data){
        this.$refs.plxTable && this.$refs.plxTable.reloadData(data)
      },
      //加载数据（对于表格数据需要重载、局部递增场景下可能会用到）
      loadData(data){
        this.$refs.plxTable.loadData(data)
      },
      // 更新单元格状态
      updateCellStatus(row, column) {
        this.$refs.plxTable.updateStatus({row, column})
      },
      //手动处理数据（对于手动更改了排序、筛选...等条件后需要重新处理数据时可能会用到）
      updateData(){
        return new Promise((resolve, reject) => {
          const updateData = this.$refs.plxTable.updateData()
          resolve(updateData)
        }).catch(error => {
          reject(error)
        })
      },
      //表格实例方式，调用就会返回table实例
      tableExample(){
        return  this.$refs.plxTable.tableExample()
      },
      // 表格滚动
      tableScroll ({scrollTop, scrollLeft, table, judgeFlse}) {
        // {scrollTop， scrollLeft, table, judgeFlse: 这个参数返回一个boolean值，为true则代表表格滚动到了底部了，false没有滚动到底部，必须开起大数据渲染模式才能有值哦}, event
        // console.log(scrollTop, scrollLeft, table, judgeFlse)
        this.$emit('table-body-scroll',{scrollTop, scrollLeft, table, judgeFlse})
      },
      // 设置/重置多选可编辑列的默认值
      updateTableBoxData(tablData){
        const ckbCol=(this.tableConfig && this.tableConfig.setting) ?this.tableConfig.setting.filter(v=>{
          return v.edit && v.edit.editType==='checkbox'
        }):[]
        if(ckbCol.length===0){
          return tablData
        }
        const ckbFileds=ckbCol.map(v=>v.prop)
        const newData = tablData.map(v=>{
          const ckbObj={}
          ckbFileds.forEach(field=>{
            const oVal = v[field] || ''
            let value = []
            if(oVal){
              if(oVal instanceof Array){
                value = oVal
              }else{
                if(oVal instanceof Object){
                  value.push(oVal)
                }
              }
            }
            ckbObj[field] = value
          })
          return {...v,...ckbObj}
        })
        return newData
      },
      // 查询下拉框和查询值发生改变是触发
      searchFieldChangeHandle(params){
        this.$emit('search-field-change',params)
      },
      // 清空表格设置数据
      clearSetting(){
        this.settingId=''
        this.sortField = ''// this.originTableSetting.sort || ""
        this.tableRequest.sort=this.sortField
        this.sortMethod = this.originTableSetting.order==='asc'?'ascending':"descending"
        this.sortSearch =''
        this.tableRequest.order = this.sortMethod 
        
        const data = this.deepClone(this.originTableSetting.setting) || [];
        this.tableSetting = data
        this.alterTableConfig(data);
        this.initTableData();
      }
    }
  }
</script>

<style lang="scss" scoped>
  $qup-color-primary:#3DC094;
  .table-box .plx-header--row .plx-header--column.col--fixed {
      cursor: no-drop;
  }
  .table-list-box{
    border: 0 !important;
  }
  
  .required-icon {
    display: inline-block;
    color: #f56c6c;
    width: .8em;
    height: 1em;
    line-height: 1em;
    font-family: Verdana,Arial,Tahoma;
    font-weight: 400;
    position: relative;
    // margin-right: .1em;
    &:before {
      content: "*";
      position: absolute;
      left: 0;
      top: .4em;
    }
  }
  .edit-style{
    margin-left: 5px;
    color: $qup-color-primary;
  }
  .el-date-editor.el-input{
    width: auto;
  }
  /deep/ .el-table__row .cell.el-tooltip {
    width: auto !important;
  }
  /deep/ .el-tooltip .table-other span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .el-select:not(.textRemote) /deep/ .el-input__suffix-inner .el-icon-:before{
    content: "\e6e1";
  }
  .el-select:not(.textRemote) /deep/ .is-focus .el-input__suffix-inner .el-icon-{
    transform: rotate(0deg) !important;
  }

  .picklist-icon{
    cursor: pointer;
    vertical-align: -3px;
  }

  @-moz-document url-prefix() {
    .el-tooltip .table-other span {
      overflow: visible !important;
    }
  }

  /deep/ .el-table th > .cell {
    white-space: nowrap !important;
  }

  .table-no-data {
    color: #c0c0c0;
    font-size: 12px;
    text-align: center;
    padding-top: 15%;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }

  .table-image {
    margin: 5px;
    max-width: 100%;
    max-height: 50px;
    object-fit: cover;
    vertical-align: middle;
  }

  /deep/ .gutter {
    background-color: #f6f6f6 !important;
  }

  /deep/ .el-table__fixed-right-patch {
    background-color: #f6f6f6 !important;
  }

  .function-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
    &.btn-align-right{
      justify-content: flex-end;
    }
    .condition-box {
      width: 100%;
      padding: 10px 0 0;

      .condition-tag {
        margin-right: 5px;
        cursor: pointer;
      }
    }
    .table-search{
      padding-top: 5px;
      margin-right: 15px;
    }
    .last-flex{
      margin-left: auto;
    }
  }

  .btn-box .el-button {
    min-width: 56px;
    padding: 0 5px;
    margin-left: 10px;
    margin-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .btn-box .el-button:first-child{
    margin-left: 0;
  }

  .btn-box .el-dropdown .el-button {
    margin-left: 6px;
  }

  .table-box {
    overflow: hidden;
    position: relative;
  }

  .table-box /deep/ .el-button {
    border-radius: 0px;
  }
  
  /*编辑状态单元格*/
/deep/ .edit-cell {
    width: 100% !important;
    .el-input.is-disabled .el-input__inner{
      color: #333;
      cursor: default;
    }
    .el-input.is-disabled .el-input__suffix{
      display: none;
    }

    .el-input__inner {
      background: transparent;
      border:0;
      padding-left: 0 !important;
      border-color: transparent;

      &:focus {
        background: #fff;
        border: 1px solid $qup-color-primary !important;
        padding-left: 10px !important;
      }
    }
    &.el-input-number{
      .el-input__inner{
        border:solid #ddd 1px;
        background: #fff;
        padding-left:10px !important;
      }
    }

    .el-icon-arrow-up {
      opacity: 0;

      &.is-reverse {
        opacity: 1;
      }
    }

    &.el-date-editor--date {
      .el-input__inner {
        padding-left: 10px !important;
      }

      .el-icon-date {
        display: none;
      }
    }
  }

/*虚拟表格字体与边框重置*/  
/deep/ .elx-grid.size--small, 
/deep/ .elx-table.size--small{
  font-size:12px
}

/*重置表头样式*/
/deep/ .elx-header--column {
  .elx-resizable{
    right: -6px;
    &:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 1px;
      height: 100% !important;
      background-color: #D9DDDF;
    }
  }
  .elx-resizable.is--line:before {
    width: 1px;
    height: 100% !important;
    background-color: #D9DDDF;
  }
  .elx-cell--required-icon:before{
    top:.4em
  }
  .elx-cell--edit-icon{
    display:none
  }

  // 排除复选框表头
  &:not(.col--checkbox){
    .elx-cell--title{
      display: flex;
      align-items: center;
      .elx-cell--edit-icon{
        display: inline-block;
      }
    }
  }

  .elx-cell--required-icon~.elx-cell--title{
    .required-icon{
      display: none;
    }
  }
}

</style>
